<template>
  <tabbar>
    <tabbar-item path="/home" activeColor="red">
      <img slot="tabbar-icon" src="~assets/img/tabbar/home.svg">
      <img src="~assets/img/tabbar/home_active.svg" slot="tabbar-icon-active">
      <div slot="tabbar-text">首页</div>
    </tabbar-item>
    <tabbar-item path="/category" activeColor="blue">
      <img slot="tabbar-icon" src="~assets/img/tabbar/category.svg">
      <img src="~assets/img/tabbar/category_active.svg" alt="" slot="tabbar-icon-active">
      <div slot="tabbar-text">分类</div>
    </tabbar-item>
    <tabbar-item path="/cart" activeColor="blue">
      <img slot="tabbar-icon" src="~assets/img/tabbar/cart.svg">
      <img src="~assets/img/tabbar/cart_active.svg" alt="" slot="tabbar-icon-active">
      <div slot="tabbar-text">购物车</div>
    </tabbar-item>
    <tabbar-item path="/profile" activeColor="blue">
      <img slot="tabbar-icon" src="~assets/img/tabbar/profile.svg">
      <img src="~assets/img/tabbar/profile_active.svg" alt="" slot="tabbar-icon-active">
      <div slot="tabbar-text">我的</div>
    </tabbar-item>
  </tabbar>

</template>

<script>
  import Tabbar from "@/components/common/tabbar/Tabbar"
  import TabbarItem from "@/components/common/tabbar/TabbarItem"
    export default {
        name: "MainTabbar",
        components:{
          TabbarItem,
          Tabbar
        }
    }
</script>

<style scoped>

</style>
